<template>
  <div calss="app-box">
    <div class="resultImg">
      <img :src="resultImg">
      <p>
        <img :src="iconUrl">
        <span>{{resultMsg}}</span>
      </p>
      <p class="errorReason">{{errorReason}}</p>
      <x-button :text="buttonMsg" @click.native="goNextPage"></x-button>
    </div>
    <div class='tips'>
      <p>提示：</p>
      <p>1、账单分期详情，以发卡行实际分期账单为准;</p>
      <p>2、针对部分银行</p>
      <p>订单分期金额=发卡行实际扣款金额+发卡行分期服务费</p>
    </div>
  </div>
</template>
<script>
import { XButton } from 'vux'
export default {
  components: {
    XButton
  },
  data: function() {
    return {
      result: false,
      errorReason: '原因：网络超时',
      failImgUrl: require('../assets/img_fail.png'),
      successImgUrl: require('../assets/img_success.png'),
      failIcon: require('../assets/icon_fail@2x.png'),
      successIcon: require('../assets/icon_success@2x.png'),
      resultMsg: '交易成功', // 交易失败
      buttonMsg: '返回商城', // 返回首页
      resultImg: null,
      iconUrl: null
    }
  },
  created: function() {

  },
  mounted() {
    debugger
    this.getquerys()
  },
  methods: {
    // 取参数
    getquerys() {
      debugger
      this.errorReason = this.$route.query.errormsg
      if (this.$route.query.resultCode == '03') {
        this.result = true
      } else {
        this.result = false
      }
      if (this.result) {
        this.resultImg = this.successImgUrl
        this.iconUrl = this.successIcon
      } else {
        this.resultImg = this.failImgUrl
        this.iconUrl = this.failIcon
        this.resultMsg = '交易失败'
      }
      debugger
    },
    goNextPage: function() {
      if (this.result) {
        alert('查看订单详情')
        this.$router.push({
          path: '',
          query: {}
        })
      } else {
        alert('返回首页')
        this.$router.push({
          name: 'home'
        })
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.resultImg {
  text-align: center;
  background-color: white;
  padding-bottom: 15px;
  >img {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }
  >p {
    height: 44px;
    line-height: 44px;
    span {
      font-size: 16px;
      color: #007ee9;
    }
    img {
      width: 22px;
      height: 22px;
      vertical-align: middle;
    }
  }
  p.errorReason {
    color: #999999;
    font-size: 13px;
    line-height: 13px;
    height: 13px;
    margin: 6px 0 15px 0;
  }
  button {
    width: 200px !important;
    font: normal normal 16px/40px 'microsoft yahei';
    color: #007ee9;
    border: 1px solid #007ee9 !important;
    border-radius: 4px;
  }
}

.tips {
  padding: 15px;
  color: #999999;
  font: normal normal 13px/26px 'microsoft yahei';
  p:first-child {
    margin-top: 15px;
  }
  p:last-child {
    text-indent: 20px;
  }
}

</style>
